<template>
  <div class="main">
    <!-- 平安报 -->
    <div id="pinganbao" v-if="pinganbao1 != ''" class="alex-center1">
      <van-tag type="primary" class="alex-tag">平安报</van-tag>
      <div id="alex-pinganbao1" class="alex-con">{{ pinganbao1 }}</div>
      <van-button
        type="info"
        size="small"
        class="alex-btn alex-pinganbao1"
        @click="copycon('.alex-pinganbao1')"
        data-clipboard-target="#alex-pinganbao1"
        >复制平安报</van-button
      >
    </div>
    <!-- 实时数据 -->
    <div id="pinganbao" v-if="nowdata1 != ''" class="alex-infobox alex-center">
      <van-tag type="success" class="alex-tag">实时数据</van-tag>
      <div id="alex-nowdata1" itemid="" class="alex-con">{{ nowdata1 }}</div>
      <van-row class="alex-btn">
        <van-col span="5"></van-col>
        <van-col :span="nowdata1 =='点击【实时数据】按钮获取最新站点数据...'?24 : 8"
          ><van-button type="primary" size="small" @click="nowdata"
            >实时数据</van-button
          ></van-col
        >
        <van-col span="7">
          <van-button
            v-show="nowdata1 !='点击【实时数据】按钮获取最新站点数据...'"
            type="primary"
            size="small"
            class="alex-nowdata1"
            @click="copycon('.alex-nowdata1')"
            data-clipboard-target="#alex-nowdata1"
            >复制</van-button
          >
        </van-col>
      </van-row>
    </div>
    <!-- 昨晚8点至今 -->
    <div id="pinganbao" v-if="allday1 != ''" class="alex-infobox alex-center">
      <van-tag type="warning" class="alex-tag">昨晚8点至今</van-tag>
      <div id="alex-allday1" class="alex-con">{{ allday1 }}</div>
      <van-row class="alex-btn">
        <van-col span="5"></van-col>
        <van-col :span="allday1 =='点击【昨晚8点至今】按钮获取最新站点数据...'?24 : 8"
          ><van-button type="warning" size="small" @click="allday"
        >昨晚8点至今</van-button
      ></van-col
        >
        <van-col span="7">
          <van-button
            v-show="allday1 !='点击【昨晚8点至今】按钮获取最新站点数据...'"
            type="warning"
            size="small"
            class="alex-allday1"
            @click="copycon('.alex-allday1')"
            data-clipboard-target="#alex-allday1"
            >复制</van-button
          >
        </van-col>
      </van-row>
    </div>
    <!-- 最近1小时 -->
    <div id="pinganbao" v-if="nowhour1 != ''" class="alex-infobox alex-center">
      <van-tag type="danger" class="alex-tag">最近1小时</van-tag>
      <div id="alex-nowhour1" class="alex-con">{{ nowhour1 }}</div>
      <van-row class="alex-btn">
        <van-col span="5"></van-col>
        <van-col :span="nowhour1 =='点击【最近1小时】按钮获取最新站点数据...'?24 : 8"
          ><van-button type="danger" size="small" @click="nowhour"
            >最近1小时</van-button
          ></van-col
        >
        <van-col span="7">
          <van-button
            v-show="nowhour1 !='点击【最近1小时】按钮获取最新站点数据...'"
            type="danger"
            size="small"
            class="alex-nowhour1"
            @click="copycon('.alex-nowhour1')"
            data-clipboard-target="#alex-nowhour1"
            >复制</van-button
          >
        </van-col>
      </van-row>
    </div>
    <!-- 最近1小时 -->
    <div id="pinganbao" class="alex-infobox alex-center">
      <van-button type="primary" size="small" class="alex-btn" @click="handlewx"
        >一键处理微信预警推送</van-button
      >
    </div>
  </div>
</template>
<script>
import ClipboardJS from "clipboard";
import { Toast } from "vant";
export default {
  name: "ljymes",
  data() {
    return {
      pinganbao1: "",
      nowdata1: "点击【实时数据】按钮获取最新站点数据...",
      allday1: "点击【昨晚8点至今】按钮获取最新站点数据...",
      nowhour1: "点击【最近1小时】按钮获取最新站点数据...",
      api_uri: "/ljyapi/alex",
      nowdatauri: "/shsqapi/ljyalex",
    };
  },
  methods: {
    pinganbao() {
      let _this = this;
      this.axios({
        method: "post",
        url: _this.api_uri + "/byalex/shitljydata",
        dataType: "json",
        headers: {
          "Content-Type": "application/json;charset=UTF-8",
        },
      })
        .then((res) => {
          if (res.data) {
            _this.pinganbao1 = res.data.res;
          }
        })
        .catch((err) => {
          console.log("请求数据时发生未知错误...", err);
        });
    },
    copycon(cp_class) {
      let cp = new ClipboardJS(cp_class);
      cp.on("success", function (e) {
        Toast({
          message: "复制成功!",
          icon: "success",
        });
        e.clearSelection();
      });
      cp.on("error", function (e) {
        Toast({
          message: "复制失败!",
          icon: "info-o",
        });
        console.log(e);
      });
    },
    nowdata() {
      let _this = this;
      this.axios({
        method: "post",
        url: _this.nowdatauri + "/shsq/getNowData",
        dataType: "json",
        headers: {
          "Content-Type": "application/json;charset=UTF-8",
        },
      })
        .then((res) => {
          if (res.data.code == 200) {
            _this.nowdata1 = res.data.data;
          }
        })
        .catch((err) => {
          console.log("请求数据时发生未知错误...", err);
        });
    },
    allday() {
      let _this = this;
      this.axios({
        method: "post",
        url: _this.api_uri + "/byalex/shitljy",
        dataType: "json",
        headers: {
          "Content-Type": "application/json;charset=UTF-8",
        },
      })
        .then((res) => {
          if (res.data) {
            _this.allday1 = res.data.res;
          }
        })
        .catch((err) => {
          console.log("请求数据时发生未知错误...", err);
        });
    },
    nowhour() {
      let _this = this;
      this.axios({
        method: "post",
        url: _this.api_uri + "/byalex/shitljyone",
        dataType: "json",
        headers: {
          "Content-Type": "application/json;charset=UTF-8",
        },
      })
        .then((res) => {
          if (res.data) {
            _this.nowhour1 = res.data.res;
          }
        })
        .catch((err) => {
          console.log("请求数据时发生未知错误...", err);
        });
    },
    handlewx() {
      let _this = this;
      this.axios({
        method: "post",
        url: _this.api_uri + "/byalex/handlewechatalarm",
        dataType: "json",
        headers: {
          "Content-Type": "application/json;charset=UTF-8",
        },
      })
        .then((res) => {
          if (res.data) {
            Toast({
              message: res.data.res,
              icon: "success",
            });
          }
        })
        .catch((err) => {
          console.log("请求数据时发生未知错误...", err);
        });
    },
  },
  mounted() {
    this.pinganbao();
  },
};
</script>
<style scoped>
.main {
  width: 100vw;
  height: 160vh;
  background-color: #cfcaa9 !important;
  padding: 2vh 0 12vh 0;
}
.alex-center {
  width: 100vw;
  text-align: center;
  padding: 1vh 0 4vh 0;
}
.alex-center1 {
  width: 100vw;
  text-align: center;
  padding: 1vh 0 1vh 0;
}
.alex-infobox {
  position: relative;
  border-top: 1px solid rgb(249, 243, 243);
  top: 5vh;
}
.alex-con {
  text-align: left !important;
  padding: 2vh 3vw 2vh 3vw;
}
.alex-tag {
  margin-left: 65vw;
}
.alex-btn {
  position: relative;
  top: 2vh;
}
</style>